<template>
  <div class="ly-content ql-center">
    <div class="ly-center ">
      <div class="ql-title">{{news.theme}}</div>
      <div class="ql-info">
        <div class="left">发布者：{{news.userName}}</div>
        <div class="right">{{news.releaseTime}}</div>
      </div>
      <div v-html="str" class="ql-editor">
        {{str}}
      </div>
    </div>
  </div>
</template>

<script>
  import http from "../../http";
  export default {

    data() {
      return {
        str: '',
        news: {},
      }
    },
    created: function () {
      this.loadInfo();
    },
    methods: {
      loadInfo: function () {
        http.post("/hk/news/getNewsInfo?id=" + this.$route.query.id).then(res => {
          console.log(res);
          if (res.data.code == 20000) {
            this.str = this.escapeStringHTML(res.data.data.newsContent);
            this.news = res.data.data;
            console.log(this.str);
          } else {
            this.$dialog.toast({
              mes: res.data.message,
              timeout: 1500
            });
          }
        });
      },
      escapeStringHTML(str) {
        str = str.replace(/&lt;/g, '<');
        str = str.replace(/&gt;/g, '>');
        return str;
      },
    }
  }
</script>

<style>
  .ql-center .ql-editor {
    padding: 0 0.2rem;
    background: #fff;
  }

  .ql-center .ql-editor img {
    max-width: 100%;
    height: auto;
  }
</style>

<style scoped lang="scss">
  .ql-center {
    background-color: #fff;
  }

  .ql-title {
    width: 100%;
    height: auto;
    font-size: 0.4rem;
    padding: 0.2rem;
  }

  .ql-info {
    padding: 0rem 0.2rem 0.6rem;
    color: #666;
    .left {
      float: left;
    }
    .right {
      float: right;
    }
  }


</style>
